<template>
	<view>
		<view class="page-foot"><view class="btn">提交评价</view></view>
		<view class="container">
			<view class="fs34 col10 mb40">一亩田服务反馈</view>
			<view class="flex-box">
				<image class="img-avatar mr30" src="/static/images/icon_avatar.png" mode="aspectFill"></image>
				<view class="flex-grow-1">
					<view class="fs34 col10 mb10">谢敏</view>
					<view class="fs28 col89">已为你服务20天</view>
				</view>
			</view>
			<view class="rate-wrap flex-box flex-center">
				<u-rate @change="rateChange" :count="count" :value="value" size="75" inactive-color="#F1F3FA" active-color="#FF7B40" gutter="35"></u-rate>
			</view>
			<view class="fs28 blue tc pb30 m-hairline--bottom mb30">一般，还需改善</view>
			<textarea class="textarea" v-model="comment_text" placeholder="请输入您的评价"></textarea>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			count: 5,
			value: 0,
			comment_text: ''
		};
	},
	methods: {
		rateChange(e) {
			this.value = e
			console.log(e);
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx 40rpx;
}
.img-avatar {
	display: block;
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
}
.rate-wrap {
	margin: 75rpx 0 30rpx;
}
.textarea {
	padding: 30rpx;
	width: 670rpx;
	height: 185rpx;
	background: #f6f7fa;
	border-radius: 10rpx;
	font-size: 28rpx;
	color: #cccccc;
	line-height: 40rpx;
}
.page-foot {
	padding: 0 40rpx 40rpx;
}
.page-foot .btn {
	width: 670rpx;
	height: 90rpx;
	border-radius: 10rpx;
	background: var(--blue);
	box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
	padding: 0;
	line-height: 90rpx;
	font-weight: normal;
	color: #fff;
	font-size: 30rpx;
	text-align: center;
}
</style>
